<template>
  <h2>喜欢美女次数</h2>
  <!-- <div>{{ number }}</div> -->
  <div>{{ count }}</div>
  <button @click="updateNumber">更新次数</button>
</template>

<script lang="ts">
import { defineComponent, ref } from "vue";

// defineComponent函数，目的是定义一个组件，内部可以传入一个配置对象
export default defineComponent({
  name: "App",
  // vue2
  /*data() {
    return {
      number: 0,
    };
  },
  methods: {
    updateNumber() {
      this.number++;
    },
  },*/
  // vue3  在组件渲染之前执行的函数，只执行一次
  setup() {
    // let count = 0; // 定义一个变量是非响应式的
    // ref是一个函数，作用：定义一个响应式的数据，返回一个Ref对象，对象中有一个value属性，如果
    // 需要对数据进行操作，需要使用该ref对象调用value属性的方式进行数据的操作
    // html模板中是不需要使用.value属性的写法
    const count = ref(0);
    function updateNumber() {
      console.log("哈哈哈");
      count.value++;
    }
    return { count, updateNumber };
  },
});
</script>

<style>
</style>
